<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Drag & Drop with HTML5, jQuery and jQuery UI</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <link rel="stylesheet" href="css/jquery-ui.css">
        <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.11.2.js"></script>
        <script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
        <script type="text/javascript" src="js/ckeditor/adapters/jquery.js"></script>
        <!--<script type="text/javascript" src="js/jquery-ui-context-menu.js"></script>-->
        <script type="text/javascript" src="js/wrap.js"></script>
        <script type="text/javascript">

            $(function () {
                $("#before-contrainer").css("min-height", $(".toolbar").height());
                $("#sortable").sortable();

                function getParentTagKey(element, arrTagName) {
                    if (element.is("div")) {
                        return arrTagName;
                    } else {
                        var parent = element.parent();
                        arrTagName.push(element.prop('tagName'));
                        getParentTagKey(parent, arrTagName);
                    }
                }

                function getElementParent(element, newElement, tagName) {
                    if (element.is(tagName)) {
                        element.replaceWith(newElement);
                        return element;
                    } else {
                        element.replaceWith(newElement);
                        var parent = element.parent();
                        getElementParent(parent, newElement, tagName);
                    }
                }

                var isBold = false,
                        isItalics = false,
                        isUnderline = false;
                function insertAtCaret(el, cmd) {
                    var range = window.getSelection().getRangeAt(0);
                    if (range != "") {
                        switch (cmd) {
                            case "bold":
                                if (isBold) {
                                    var newElement = document.createTextNode(range);
                                    getElementParent(el, newElement, "B");
//                                    realElement.replaceAll();
                                } else {
                                    var newElement = document.createElement('b');
                                    newElement.innerHTML = range;
                                    range.deleteContents();
                                    range.insertNode(newElement);
                                }
                                break
                            case "italics":
                                if (isItalics) {
                                    var newElement = document.createTextNode(range);
                                    var realElement = getElementParent(el, "I");
                                    realElement.replaceWith(newElement);
                                } else {
                                    var newElement = document.createElement('i');
                                    newElement.innerHTML = range;
                                    range.deleteContents();
                                    range.insertNode(newElement);
                                }
                                break
                            case "underline":
                                if (isUnderline) {
                                    var newElement = document.createTextNode(range);
                                    var realElement = getElementParent(el, "U");
                                    realElement.replaceWith(newElement);
                                } else {
                                    var newElement = document.createElement('u');
                                    newElement.innerHTML = range;
                                    range.deleteContents();
                                    range.insertNode(newElement);
                                }
                                break
                        }
                    }
                }

                $(document).contextmenu({
                    delegate: ".hasmenu",
                    preventContextMenuForPopup: true,
                    preventSelect: false,
                    taphold: true,
                    menu: [{title: "Bold", cmd: "bold"},
                        {title: "Italics", cmd: "italics"},
                        {title: "Underline", cmd: "underline"}],
                    // Handle menu selection to implement a fake-clipboard
                    select: function (event, ui) {
                        var $target = ui.target;
                        insertAtCaret($target, ui.cmd);
                        // Optionally return false, to prevent closing the menu now
                    },
                    // Implement the beforeOpen callback to dynamically change the entries
                    beforeOpen: function (event, ui) {
                        var $menu = ui.menu,
                                $target = ui.target,
                                extraData = ui.extraData; // passed when menu was opened by call to open()

                        ui.menu.zIndex($(event.target).zIndex() + 1);

                        $(document)
                                .contextmenu("enableEntry", "bold", true)
                                .contextmenu("enableEntry", "italics", true)
                                .contextmenu("enableEntry", "underline", true);

                        var range = window.getSelection().getRangeAt(0);
                        var isDisable = false;
                        var arr = [];
                        getParentTagKey($target, arr);
                        if (range != "") {
                            if ($target.last("b").is("b")) {
                                if (range == $target.last("b").html()) {
                                    $(document)
                                            .contextmenu("setEntry", "bold", "Un-bold");
                                    isBold = true;
                                } else {
                                    $(document)
                                            .contextmenu("setEntry", "bold", "Un-bold")
                                            .contextmenu("enableEntry", "bold", false);
                                    isDisable = true;
                                }
                            } else {
                                isBold = false;
                                $(document)
                                        .contextmenu("setEntry", "bold", "Bold");
                            }

                            if ($target.last("i").is("i")) {
                                if (range == $target.last("i").html()) {
                                    $(document)
                                            .contextmenu("setEntry", "italics", "Un-italics");
                                    isItalics = true;
                                } else {
                                    $(document)
                                            .contextmenu("setEntry", "italics", "Un-italics")
                                            .contextmenu("enableEntry", "italics", false);
                                    isDisable = true;
                                }
                            } else {
                                isItalics = false;
                                $(document)
                                        .contextmenu("setEntry", "italics", "Italics");
                            }

                            if ($target.last("u").is("u")) {
                                if (range == $target.last("u").html()) {
                                    $(document)
                                            .contextmenu("setEntry", "underline", "Un-underline");
                                    isUnderline = true;
                                } else {
                                    $(document)
                                            .contextmenu("setEntry", "underline", "Un-underline")
                                            .contextmenu("enableEntry", "underline", false);
                                    isDisable = true;
                                }
                            } else {
                                isUnderline = false;
                                $(document)
                                        .contextmenu("setEntry", "underline", "Underline");
                            }

                            if (jQuery.inArray('B', arr) !== -1) {
                                if (isDisable) {
                                    $(document)
                                            .contextmenu("setEntry", "bold", "Un-bold")
                                            .contextmenu("enableEntry", "bold", false);
                                } else {
                                    $(document)
                                            .contextmenu("setEntry", "bold", "Un-bold");
                                    isBold = true;
                                }
                            }

                            if (jQuery.inArray('I', arr) !== -1) {
                                if (isDisable) {
                                    $(document)
                                            .contextmenu("setEntry", "italics", "Un-italics")
                                            .contextmenu("enableEntry", "italics", false);
                                } else {
                                    $(document)
                                            .contextmenu("setEntry", "italics", "Un-italics");
                                    isItalics = true;
                                }
                            }

                            if (jQuery.inArray('U', arr) !== -1) {
                                if (isDisable) {
                                    $(document)
                                            .contextmenu("setEntry", "underline", "Un-underline")
                                            .contextmenu("enableEntry", "underline", false);
                                } else {
                                    $(document)
                                            .contextmenu("setEntry", "underline", "Un-underline");
                                    isUnderline = true;
                                }
                            }
                        }
                        // Optionally return false, to prevent opening the menu now
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="dialog" class="dialog shadow">
            <div class="dialog-text">
                <p></p>
            </div>
            <div class="dialog-button">
                <button id="btn-yes">Yes</button>
                <button id="btn-no">No</button>
            </div>
        </div>
        <div id="not-dialog">
            <div class="top-box shadow">TOP</div>
            <div class="bottom-box shadow">BOT</div>

            <article class="toolbar">
                <header>
                    <h1>Drag & Drop with HTML5, jQuery and jQuery UI</h1>
                </header>
                <section class="menu">
                    <nav>
                        <ul>
                            <li>
                                <select id="selectType">
                                    <option value="">Type</option>
                                    <option value="1">Text</option>
                                    <option value="2">image</option>
                                    <option value="3">Image left / Text right</option>
                                    <option value="4">Text left / Image right</option>
                                    <option value="5">Image both</option>
                                </select>
                            </li>
                            <li>
                                <button id="buttonAdd">Add</button>
                            </li>
                            <li>
                                <button id="buttonReset">Reset</button>
                            </li>
                            <li>
                                <button id="buttonPreview">Preview</button>
                            </li>
                        </ul>
                    </nav>
                </section>
            </article>
            <div id="before-contrainer"></div>
            <article class="contrainer">
                <section class="content-box">
                    <article id="sortable">
                        <!--                    <section class="section" name="0" id="section0">
                                                <div class="up"></div>
                                                <div class="down"></div>
                                                <div class="delete shadow">X</div>
                                                <div class="img img-left">
                                                    <div class="upload"></div>
                                                    <input type="file" style="display:none" />
                                                </div>
                                                <div class="text" contenteditable="true">Please edit me</div>
                                                <div class="end-of-section"></div>
                                            </section>-->
                    </article>
                </section>
            </article>
            <div style="clear:both;"></div>
        </div>
    </body>
</html>
